<template>
    <!-- 防止打开popup滚动层穿透 -->
    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
    <view class="container">
        <!-- 标题 -->
        <view class="title">
            <input v-model="title" placeholder="填写标题" placeholder-class="input-placeholder"
                placeholder-style="font-size:35rpx" focus />
        </view>
        <!-- 内容 -->
        <scroll-view scroll-y class="content">
            <!-- 正文 -->
            <textarea class="textarea" v-model="content" placeholder="添加正文" :maxlength="1000"
                placeholder-class="textarea-placeholder" />
        </scroll-view>
        <!-- 图片上传区 -->
        <uni-file-picker limit="9" title="最多选择9张图片" :auto-upload="false" :v-model='tempFiles'
            @select='selectUpload'></uni-file-picker>
        <view class="btn-box">
            <view class="left">
                <button class="btn-add" @tap="addTag()">添加话题</button>
                <view class="tag" v-if="tag">
                    <text>{{ tag.title }}</text>
                    <text class="iconfont icon-chacha" @tap="clearTag"></text>
                </view>
            </view>
            <button class="btn-publish" @click="handlePublish">发布</button>
        </view>
    </view>
    <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="20px 20px 0 0" class="popup"
        @change="change">
        <scroll-view scroll-y class="scroll">
            <view @tap="selectTag(item)" class="item" v-for="(item, index) in category" :key="index"
                hover-class="active">
                {{ item.title }}
            </view>
        </scroll-view>
        <button class="cancel" @tap="close">取消</button>
    </uni-popup>

</template>
<script setup lang="ts">
import { useMetaStore } from '@/store/modules/meta';
import { ref } from 'vue';
import type { Category } from '@/type/article'
import { category } from '@/utils/hook';
import { API_publish, API_uploadImage } from '@/service/article';
const MetaStore = useMetaStore();
//防滚动穿透变量
let show = ref<boolean>(false);
//控制弹出层显示
const popup = ref<any>("");
//标题
const title = ref<string>('');
//内容
const content = ref<string>('');
//图片
let tempFiles = ref<any>([]);
//话题
let tag = ref<Category>();
let articleId: number = -1;

//获取上传图片文件数组
const selectUpload = (e: any) => {
    tempFiles.value = e.tempFilePaths;
}
// 防止滚动穿透
const change = (e: any) => {
    show.value = e.show;
}
//发布
const handlePublish = async () => {
    // console.log(content.value);
    let str = content.value.split('\n').join('<br>');
    console.log(str);
    if (!title.value) {
        uni.showToast({
            title: '内容不能为空哦！',
            icon: 'none',
        })
        return;
    }
    let res = await API_publish(
        title.value,
        str,
        tag.value ? tag.value.id : 0
    )
    if (res.code) {
        articleId = res.data.articleId;
    } else {
        uni.showToast({
            title: '发布失败',
            icon: 'none',
        })
        return;
    }
    for (let i = 0; i < tempFiles.value.length; i++) {
        let res = await API_uploadImage(0, articleId, i + 1, tempFiles.value[i]);
        if (res.code != 1) {
            uni.showToast({
                title: '发布失败',
                icon: 'none',
            })
            return;
        }
    }
    uni.showToast({
        title: '发布成功',
        icon: 'none',
    });
    setTimeout(() => {
        MetaStore.setIndex(true);
        uni.switchTab({ url: "/pages/discovery/discovery" });
    }, 500);
}
//添加话题,打开popup
const addTag = () => {
    popup.value.open();
}
//关闭popup
const close = () => {
    popup.value.close();
}
//选择tag
const selectTag = (item: Category) => {
    popup.value.close();
    tag.value = item;
}
//删除tag
const clearTag = () => {
    tag.value = undefined;
}
</script>
<style scoped lang="scss">
.container {
    margin: 20rpx;

    .title {
        padding: 20rpx;
        font-size: 35rpx;
        border-bottom: 1rpx solid #ddd;
    }

    .content {
        box-sizing: border-box;
        height: 50%;
        padding: 10rpx;
        width: 100%;
    }

    .textarea {
        width: 100%;
        /* 确保文本域宽度为100% */

        box-sizing: border-box;
        font-size: 30rpx;
        padding: 10rpx;
        border: none;
        outline: none;
        resize: none;
        white-space: pre-wrap;
    }

    .img-box {
        border-bottom: 1rpx solid #ddd;
        padding: 30rpx 0;
        display: flex;
        flex-wrap: wrap;

        .files {
            width: 200rpx;
            height: 200rpx;
            background-color: #eee;
            color: #6d6d6d;
            font-size: 80rpx;
            font-weight: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10rpx;
            border: 1rpx solid #ddd;
            border-radius: 10rpx;
        }

        .images {
            width: 200rpx;
            height: 200rpx;
            margin: 10rpx;
            position: relative;

            .img {
                width: 100%;
                height: 100%;
            }

            .remove {
                width: 50rpx;
                height: 50rpx;
                background-color: #f7f7f7;
                position: absolute;
                top: -5rpx;
                right: -10rpx;
                text-align: center;
                opacity: .5;
                border-radius: 0 0 0 50rpx;
                color: #c5c5c5;
                z-index: 1;
            }
        }
    }

    .btn-box {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;

        align-items: center;

        .left {
            display: flex;

            .btn-add {
                width: 176rpx;
                height: 64rpx;
                line-height: 64rpx;
                border-radius: 50rpx;
                font-size: 28rpx;
                text-align: center;
                background-color: #ededed;
                margin: 0;
                margin-right: 20rpx;
                border: 1rpx solid $color-title;
            }

            .tag {
                height: 64rpx;
                line-height: 64rpx;
                border-radius: 50rpx;
                font-size: 28rpx;
                text-align: center;
                background-color: #ededed;
                margin: 0;
                margin-right: 20rpx;
                padding: 0 30rpx;
                color: $color-title;
                border: 1rpx solid #ddd;
                display: flex;
                align-items: center;
            }
        }

        .btn-publish {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
            color: #fff;
            background-color: $color-main;
            margin: 0;
        }
    }
}

.popup {
    .scroll {
        box-sizing: border-box;
        padding: 30rpx 0;
        height: 300rpx;

        .item {
            text-align: center;
            padding: 20rpx 0;
            line-height: 30rpx;
            font-size: 28rpx;
        }

        .active {
            background-color: #ddd;
        }


    }

    .cancel {
        font-size: 30rpx;
        color: rgb(177, 24, 24);

    }
}
</style>
